<%@ page import="org.apache.commons.lang.StringUtils"%>
<%@ page import="org.springframework.security.web.WebAttributes"%>
<%@ page import="com.bstek.bdf2.core.context.ContextHolder"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>智能粮库管理平台-登录</title>
<style type="text/css">
#inputBack {
	background-color: #f0f0f0;
}

.cardIcon {
	background: url(images/card.png) no-repeat center;
}

.userIcon {
	background: url(images/user.png) no-repeat center;
}

.passwordIcon {
	background: url(images/password.png) no-repeat center;
}

#radioGroup div {
	margin-left: 14px;
}

html {
	font-size: 14px;
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
}

html,body {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
	min-width: 320px;
	background: #ffffff;
	font-family: 'Roboto', "Helvetica Neue", "Microsoft YaHei", Helvetica,
		Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4285em;
	color: rgba(0, 0, 0, 0.87);
}

.ui.centered.images,.ui.centered.image {
	margin-left: auto;
	margin-right: auto;
}

img.ui.image {
	display: block;
}

.ui.image {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	background-color: transparent;
}

img {
	border: 0;
}

form {
	margin-bottom: 1em;
	display: block;
	margin-top: 0em;
}

.ui.form {
	font-size: 1rem;
}

.ui.form .divider {
	clear: both;
	margin: 1em 0em;
}

.ui.divider {
	font-size: 1rem;
	border-top: 1px solid rgba(34, 36, 38, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ui.divider {
	/* 	margin: 1rem 0rem; */
	line-height: 1;
	height: 0em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.85);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.ui.form .field {
	clear: both;
	margin: 0em 0em 1em;
}

.ui.form .field .ui.input,.ui.form .fields .field .ui.input,.ui.form .wide.field .ui.input
	{
	width: 100%;
}

.ui.input {
	font-size: 1em;
}

.ui.input {
	position: relative;
	font-weight: normal;
	font-style: normal;
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	color: rgba(0, 0, 0, 0.87);
}

.ui
.icon
.input
>
i
.icon
:not
 
(
.link
 
)
{
pointer-events
:
none
;
}
.ui[class*="left icon"].input>i.icon {
	right: auto;
	left: 1px;
	border-radius: 0.28571429rem 0em 0em 0.28571429rem;
}

.ui.icon.input>i.icon {
	cursor: default;
	position: absolute;
	line-height: 1;
	text-align: center;
	top: 0px;
	right: 0px;
	margin: 0em;
	height: 100%;
	width: 2.67142857em;
	opacity: 0.5;
	border-radius: 0em 0.28571429rem 0.28571429rem 0em;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

i.icon,i.icons {
	font-size: 1em;
}

i.icon {
	display: inline-block;
	opacity: 1;
	margin: 0em 0.25rem 0em 0em;
	width: 1.18em;
	height: 1em;
	font-family: 'Icons';
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	text-align: center;
	speak: none;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ui.form .fields .field .ui.input input,.ui.form .field .ui.input input
	{
	width: auto;
}

.ui.form input:not ([type] ),.ui.form input[type="date"],.ui.form input[type="datetime-local"],.ui.form input[type="email"],.ui.form input[type="number"],.ui.form input[type="password"],.ui.form input[type="search"],.ui.form input[type="tel"],.ui.form input[type="time"],.ui.form input[type="text"],.ui.form input[type="url"]
	{
	font-family: 'Roboto', "Helvetica Neue", "Microsoft YaHei", Helvetica,
		Arial, sans-serif;
	margin: 0em;
	outline: none;
	-webkit-appearance: none;
	tap-highlight-color: rgba(255, 255, 255, 0);
	line-height: 1.2142em;
	padding: 0.67861429em 1em;
	font-size: 1em;
	background: #ffffff;
	border: 1px solid rgba(34, 36, 38, 0.15);
	color: rgba(0, 0, 0, 0.87);
	border-radius: 0.28571429rem;
	box-shadow: 0em 0em 0em 0em transparent inset;
	-webkit-transition: color 0.1s ease, border-color 0.1s ease;
	transition: color 0.1s ease, border-color 0.1s ease;
}

.ui.form textarea,.ui.form input:not ([type] ),.ui.form input[type="date"],.ui.form input[type="datetime-local"],.ui.form input[type="email"],.ui.form input[type="number"],.ui.form input[type="password"],.ui.form input[type="search"],.ui.form input[type="tel"],.ui.form input[type="time"],.ui.form input[type="text"],.ui.form input[type="url"]
	{
	width: 100%;
	vertical-align: top;
}

.ui[class*="left icon"].input>input {
	padding-left: 2.67142857em !important;
	padding-right: 1em !important;
}

.ui.icon.input input {
	padding-right: 2.67142857em !important;
}

.ui.input input {
	margin: 0em;
	max-width: 100%;
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 auto;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	outline: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	text-align: left;
	line-height: 1.2142em;
	font-family: 'Roboto', "Helvetica Neue", "Microsoft YaHei", Helvetica,
		Arial, sans-serif;
	padding: 0.67861429em 1em;
	background: #ffffff;
	border: 1px solid rgba(34, 36, 38, 0.15);
	color: rgba(0, 0, 0, 0.87);
	border-radius: 0.28571429rem;
	-webkit-transition: box-shadow 0.1s ease, border-color 0.1s ease;
	transition: box-shadow 0.1s ease, border-color 0.1s ease;
	box-shadow: none;
}

input[type="text"],input[type="email"],input[type="search"],input[type="password"]
	{
	-webkit-appearance: none;
	-moz-appearance: none;
}

input {
	line-height: normal;
}

button,input,optgroup,select,textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

*,*:before,*:after {
	box-sizing: inherit;
}

.ui.primary.button {
	box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}

.ui.primary.buttons .button,.ui.primary.button {
	background-color: #2185d0;
	color: #ffffff;
	text-shadow: none;
	background-image: none;
}

.ui.buttons .button,.ui.buttons .or,.ui.button {
	font-size: 1rem;
}

.ui.button {
	cursor: pointer;
	display: inline-block;
	min-height: 1em;
	outline: none;
	border: none;
	vertical-align: baseline;
	background: #e0e1e2 none;
	color: rgba(0, 0, 0, 0.6);
	font-family: 'Roboto', "Helvetica Neue", "Microsoft YaHei", Helvetica,
		Arial, sans-serif;
	margin: 0em 0.25em 0em 0em;
	padding: 0.78571429em 1.5em 0.78571429em;
	text-transform: none;
	text-shadow: none;
	font-weight: bold;
	line-height: 1em;
	font-style: normal;
	text-align: center;
	text-decoration: none;
	border-radius: 0.28571429rem;
	box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px
		rgba(34, 36, 38, 0.15) inset;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color
		0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
	transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s
		ease, box-shadow 0.1s ease, background 0.1s ease;
	will-change: '';
	-webkit-tap-highlight-color: transparent;
}

.content {
	width: 320px;
	margin-top: 6%;
	/* 	margin-right: 20%; */
	padding: 24px;
	max-width: 400px;
	background-color: white;
	float: right;
	position: relative;
	top: 6em;
	right: 10em;
	border-radius: 5px;
	box-shadow: 1px 1px 1px 1px #888888;
}

.label {
	color: #4A8BB3;
	position: relative;
	top: 10px;
	font-size: 18px;
	font-weight: bold;
}
</style>

</head>
<body>
	<div style="height: 100px; padding-top: 30px;">
		<img src="images/logo_03.png" class="ui image centered">
	</div>
	<div
		style="width: 100%; height: 85%; background: url(images/bg_02.jpg) 0 0 no-repeat; background-size: 100% auto;">

		<form action="security_check_" method="post" name="myform"
			onsubmit="return check()">
			<div class="ui form content">

				<label><span class="label">用户登录</span> 
				<span id="errorInfo" style="color: red; top: 10px; position: relative;">
					<%
				 	String error = getAuthenticationExceptionMessage();
				 	if (StringUtils.isNotEmpty(error)) {
				 		out.println(error);
				 	}
					 %>
					</span></label>

				<!-- 分割线 -->
				<div class="ui divider fitted"></div>

				<!-- 选择按钮 -->
				<div class="field">
					<div id="radioGroup" class="ui grouped"></div>
				</div>
				
				<div class="field">
					<div id="inputBack" class="ui input basic medium left icon">
						<i class="userIcon icon"></i> <input id="username_" type="text"
							name="username_" placeholder="用户名">
					</div>
				</div>

				<div class="field">
					<div id="inputBack" class="ui input basic medium left icon">
						<i class="passwordIcon icon"></i> 
						<input id="password_" type="password" name="password_" placeholder="密码">
					</div>
				</div>
				
				<div class="field">
					<div id="inputBack" class="ui input basic medium left icon" style="width:135px;">
						<i class="cardIcon icon"></i>
						<input id="captcha_" type="text" name="captcha_"  placeholder="验证码" >
						<img src="generate.captcha.action?width=120&height=38" 
					onclick="javascript:this.src='generate.captcha.action?width=120&height=38&tm='+Math.random()" style="vertical-align:bottom;" alt="验证码" />
					</div>
				</div>

				<div class="field">
					<button type="submit" onclick="check()"
						style="width: 110px; height: 40px; background-color: #1a6e9f; margin-left: 10px;"
						class="ui button primary">
						<span>登录</span>
					</button>
					
					<button type="reset"
						style="width: 110px; height: 40px; background-color: #5a90b1; margin-left: 20px;"
						class="ui button primary">
						<span>重置</span>
					</button>
					
				</div>
				<%!private String getAuthenticationExceptionMessage() {
					Exception exp = (Exception) ContextHolder.getHttpSession()
							.getAttribute(WebAttributes.AUTHENTICATION_EXCEPTION);
					if (exp == null) {
						exp = (Exception) ContextHolder.getRequest().getAttribute(
								WebAttributes.AUTHENTICATION_EXCEPTION);
					}
					if (exp != null) {
						return exp.getMessage();
					}
					return null;
				}%>
			</div>
		</form>

	</div>

	<script type="text/javascript">
		function check() {
			var errorInfo = document.getElementById("errorInfo");
			var text = document.getElementById("captcha_").value;
			if (null == text || text == "") {
				errorInfo.innerText = "提示：验证码不能为空！";
				return false;
			}
			text = document.getElementById("username_").value;
			if (null == text || text == "") {
				errorInfo.innerText = "提示：用户名不能为空！";
				return false;
			}
			text = document.getElementById("password_").value;
			if (null == text || text == "") {
				errorInfo.innerText = "提示：密码不能为空！";
				return false;
			}
			errorInfo.innerText = "";
			return true;
		}
	</script>
</body>
</html>